<template>
  <div class="title-btns block">
    <el-button type="primary" @click="addClickEvent" v-if="hasAuth(auth, 'plus')">
      {{$t('ship.button.plus')}}
    </el-button>
  </div>

  <el-table
      stripe
      class="daf-table"
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        width="50px"
        >
    </el-table-column>
    <el-table-column
        prop="username"
        label="User Name"
        >
    </el-table-column>
    <el-table-column
        prop="account"
        label="Account"
      /> 
    <el-table-column
        label="Role"
    >
      <template #default="scope">
        <span>{{scope.row.roleName}}</span>
      </template>
    </el-table-column>
      
    <el-table-column
        prop="phone"
        label="phone">
    </el-table-column>
    <el-table-column
        prop="email"
        label="email">
    </el-table-column>
    <el-table-column
        label="Enabled">
      <template #default="scope">
        <span>{{enableStatuss[scope.row.status]}}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="Time Created">
    </el-table-column>
    <el-table-column
        prop="updateTime"
        label="Update Time">
    </el-table-column>
    <el-table-column
        label="Operation">
      <template #default="scope">
        <span
            class="btn-primary"
            v-if=" hasAuth(auth, 'edit')"
            @click="editClickEvent(scope.row)">{{$t('ship.button.edit')}}
        </span>&nbsp;
        <span
            class="btn-primary"
            v-if="scope.row.id != 1 && hasAuth(auth, 'remove')"
            @click="removeClickEvent(scope.row.id)">{{$t('ship.button.remove')}}
        </span>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      :width="500"
      destroy-on-close
      :title="dialogTitle"
      v-model="dialogFormVisible"
      draggable="true"
      @close="dialogForm.resetFields()">
    <el-form :model="formParam" :rules="rules" ref="dialogForm">
      <el-form-item label="User Name" label-width="100px" prop="username">
        <el-input v-model="formParam.username" autocomplete="on" clearable/> 
      </el-form-item>
      <el-form-item label="Account" label-width="80px" prop="account">
        <el-input v-model="formParam.account" autocomplete="on" clearable/> 
      </el-form-item>
      <el-form-item label="Password" label-width="80px" prop="password">
        <el-input v-model="formParam.password" autocomplete="off" type="password" clearable placeholder="please input password!"/> 
      </el-form-item>
       
      <el-form-item label="Phone" label-width="80px" prop="phone">
        <el-input v-model="formParam.phone" autocomplete="off" maxlength="11" clearable/> 
      </el-form-item>
      <el-form-item label="Email" label-width="80px" prop="email">
        <el-input v-model="formParam.email" autocomplete="off" clearable/>
      </el-form-item>
      <el-form-item label="Enabled Status" label-width="120px" prop="status">
        <el-select v-model="formParam.status" placeholder="Please choose ">
          <el-option
              :key="index"
              :label="item"
              :value="index"
              v-for="(item, index) in Object.values(enableStatuss)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="Department" label-width="80px" prop="department"> 
        <el-select v-model="formParam.deptId" placeholder="Please Choose department">
          <el-option
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
              v-for="(item) in  departments"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="Role" label-width="80px" prop="roleIds" required>
        <el-select v-model="formParam.roleIds" multiple placeholder="Please Choose User Role">
          <el-option
              :key="item.id"
              :label="item.name"
              :value="item.id"
              v-for="item in roles"
          >
          </el-option>
        </el-select>
      </el-form-item>
       
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible=false">Cancel</el-button>
      <el-button @click="dialogForm.resetFields()" type="warning">Reset</el-button>
      <el-button type="primary" @click="submitForm">Save</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">

import { onMounted, ref } from 'vue';
import { ElNotification, ElMessageBox } from "element-plus";
import service from "@/utils/request";
import useUserStore from '@/store/modules/user' 
import Auth from "@/components/mixin/auth";
export default {
    name: "UserManage",
    mixins: [Auth],
    setup() {
        const user = useUserStore().GetInfo() 
        const sexs = {
            1: 'man',
            2: 'women',
        };
        const enableStatuss = {
            0: 'normal',
            1: 'unuse|freeze',
        };
        const roles = ref([]);
        const tableData = ref([]);
        const posts = ref([]);
        const dialogTitle = ref('new user');
        const dialogFormVisible = ref(false);
        const rules = ref({
            username: [
                { required: true, message: 'please input username', trigger: 'blur' },
                { min: 1, max: 20, message: 'length between 6 to 20 characters', trigger: 'blur' }
            ],
            account: [
                { required: true, message: 'please input login account', trigger: 'blur' },
                { min: 2, max: 20, message: 'length between 2 to 20 characters', trigger: 'blur' }
            ],
            password: [
                { required: true, message: 'please input login password', trigger: 'blur' },
                { min: 8, max: 20, message: 'length between 8 to 20 characters', trigger: 'blur' }
            ],
            status: [
                { type: 'number', required: true, message: 'please choose enable status', trigger: 'change' }
            ],
            deptId: [
                { type: 'number', required: true, message: 'please choose department', trigger: 'change' }
            ],
            roleId: [
                { type: 'number', required: true, message: 'please choose user role', trigger: 'change' }
            ],
        });
        const initForm = {
            id : null,
            account: '',
            username: '',
            password: '',
            post: '',
            phone: '',
            email: '',
            status: 0,
            deptId: null,
            roleId: 2,
            roleIds:[],
            entryDate: null
        };
        const dialogForm = ref(null);
        const formParam = ref(Object.assign({}, initForm));
        const departments = ref(null);
        const refreshTable = async () => {
            tableData.value = (await service.get('shipping/sysUser')).data;
            //departments.value = (await service.get('shipping/department/list')).data;
            //posts.value =   (await service.get('rental/post/list')).data
        };
        let isAdd = false;
        //新增
        const addClickEvent = () => {
            isAdd = true;
            dialogTitle.value = 'Add User';
            dialogFormVisible.value = true;
            Object.assign(formParam.value, initForm);
        };
        //修改
        let editRowId = 0;
        const tempPwd = '*********';
        const editClickEvent = (row) => {
            isAdd = false;
            editRowId = row.id;
            dialogTitle.value = 'Update User';
            dialogFormVisible.value = true;
            if (!formParam.value.password) {
                formParam.value.password = tempPwd;
            }
            formParam.value.entryDate = null;
            for (const k of Object.keys(formParam.value)) {
                row[k] != null && (formParam.value[k] = row[k]);
            }
        };
        //删除
        const removeClickEvent = (id) => {
            ElMessageBox.confirm('Confirm deletion of user？', 'Confirmation Information', { type: 'warning',confirmButtonText: "Confirm",
            cancelButtonText: "Cancel", }).then(async () => {
                await service.delete(`shipping/sysUser/${id}`);
                // @ts-ignore
                ElNotification.success({ title: 'Prompt information', message: 'Successfully deleted user', position: 'bottom-right' });
                refreshTable();
            });
        };
        //保存
        const submitForm = () => {
            // @ts-ignore
            dialogForm.value.validate(async (flag) => {
                if (!flag) {
                    // @ts-ignore
                    ElNotification.warning({ title: 'Prompt information', message: 'Verification failed!', position: 'bottom-right' });
                    return;
                }
                if (formParam.value.password == tempPwd) { // @ts-ignore
                    formParam.value.password = null;
                }
                await service[isAdd ? 'post' : 'put']( `shipping/sysUser`, formParam.value);
                // @ts-ignore
                ElNotification.success({ title: 'Prompt information', message: 'Save sucessful!', position: 'bottom-right' });
                dialogFormVisible.value = false;
                refreshTable();
            });
        };
        onMounted(async () => {
            refreshTable();
            const adminRoles = (await service.get('shipping/adminRole')).data;
            // @ts-ignore
            const level = adminRoles.find(n => n.id == user.roleId).level;
            // @ts-ignore
            adminRoles.forEach(n => {
                if (n.level > level) {
                    // @ts-ignore
                    roles.value.push(n);
                }
            });
            // @ts-ignore
            roles.value = roles.value.sort((a, b) => a.level - b.level); 
            // @ts-ignore
            const roleId = roles.value[0].roleId;
            initForm.roleId = roleId;
            formParam.value.roleId = roleId;
        });
        return {
            sexs,
            rules,
            roles,
            posts,
            tableData,
            formParam,
            departments,
            dialogForm,
            dialogTitle,
            enableStatuss,
            submitForm,
            dialogFormVisible,
            editClickEvent,
            addClickEvent,
            removeClickEvent,
        };
    }
};
//# sourceMappingURL=user.js.map

</script>

<style scoped lang="scss" src="./index.scss"></style>
